<template>
  <div class="Remark">
        <div v-for="(item,index) in remarkList" :key="index">
            <div class="parent_remark">
            <div style="display: flex; margin: 15px;">
                <div style="width: 8%;">
                    <img :src="item.userHead" alt="" style="width: 50px; height: 50px; border-radius: 50%;">
                </div>
                <div style="width: 92%;">
                    <div style="flex: 1;">
                    <span>{{ item.userName}}</span>
                </div>
                <div style="flex: 1; margin-top: 8px;">
                    <button class="reply" @click="parent_reply(index)"><i class="el-icon-edit-outline"></i>回复</button>
                    <span style="font-size: 8px;">{{item.createTime}}</span>
                </div>
                <div style="flex: 1; margin-top: 8px;">
                    <span style="font-size: 8px;">{{ item.remarkContent}}</span>
                </div>
                </div>
            </div>
            <div style="margin-bottom: 50px;" v-if="isreply[index]">
            <div style="flex: 1; margin-bottom: 20px;">
                        <button @click="notreply(index)" style="margin-left: 95px; width:65px; height: 24px; background-color: red; border: 0px; border-radius: 5px; color: #fff;"><p style="font-size: 3px;">X 取消评论</p></button>
                    </div>
                    <input type="text" style="margin-left: 75px; width: 70%; height: 50px;" v-model="replyContent">
                    <button   @click="SubmitComment(item.remarkId,item.userName,index)" style="width: 60px; height: 40px; color: #fff; background-color: aqua; border: 0px; margin-left: 40px;">提交评论</button>
                </div>
                <div v-if="item.remarkDtoChild.length" style="margin-left: 60px;">
                    <RemarkChild :remarkChild="item.remarkDtoChild" :blogId="blogId"></RemarkChild>
                </div>
            </div>
        </div>
  </div>
</template>

<script>
import RemarkChild from '../components/RemarkChild.vue'
import axios from 'axios'
export default {
    name:"Remark",
    props:{
        remark:Array,
        blogId:String,
    },
    components:{
        RemarkChild,
    },
    data(){
        return{
            remarkList:this.remark,
            isreply:[],
            replyContent:"",
        }
    },
    mounted:function(){
        this.initIsreply()
    },
    methods:{
        initIsreply(){
            for(var i=0;i<this.remark.length;i++){
                this.isreply.push(false);
            }
        },
        parent_reply(index){
            this.$set(this.isreply,index,true)
        },
        notreply(index){ 
            this.$set(this.isreply,index,false)
        },
        SubmitComment(remarkId,userName,index){
            axios.post("/SubmitComment", {
                remarkId: remarkId,
                userName:userName,
                replyContent:this.replyContent,
                blogId:this.blogId-0,
                user_token : localStorage.getItem("user_Token"),
            }).then(response=>{
                this.remarkList[index].remarkDtoChild.push(response.data)
                this.$set(this.isreply,index,false)
                this.replyContent="";
                })
        }
    }
}
</script>

<style>
    .Remark{
        width: 100%;
    }
    .parent_remark{
        background-color: rgb(213, 213, 213);
        margin:20px;
        margin-bottom: 40px;
    }
    .reply{
        color: #fff;
        background-color: #1AB667;
        border: 0px;
        width: 50px;
        height: 24px;
        margin-right: 30px;
        border-radius: 5px;
    }
</style>